<template>
  <div class="order-list-container">
    <el-card shadow="hover" style="margin-bottom: 20px">
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column prop="orderid" label="订单编号" width="120" />
        <el-table-column prop="carname" label="车辆名称" width="180" />
        <el-table-column label="车辆图片" width="300">
          <template #default="{ row }">
            <el-carousel
              :interval="3000"
              type="card"
              height="150px"
              v-if="row.photos && row.photos.split(',').length > 0"
            >
              <el-carousel-item
                v-for="(photo, index) in row.photos.split(',')"
                :key="index"
              >
                <img
                  :src="photo"
                  alt="车辆图片"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </el-carousel-item>
            </el-carousel>
            <div v-else>暂无图片</div>
          </template>
        </el-table-column>
        <el-table-column prop="totalprice" label="总价(元)" width="120" />
        <el-table-column prop="creattime" label="创建时间" width="180" />
        <el-table-column prop="endtime" label="结束时间" width="180" />
        <el-table-column prop="ispaid" label="支付状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.ispaid === 1 ? 'success' : 'danger'">
              {{ row.ispaid === 1 ? "已支付" : "未支付" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="buyername" label="租车用户" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "@/util/service";
import { useLoginStore } from "@/stores/userStores";
const orderList = ref([]);
const userStore = useLoginStore();
// 模拟获取订单数据的API调用
const fetchOrderData = async () => {
  const params = { userid: userStore.getId };
  try {
    const response = await api.post("/torder/selectOrderByUid", params);
    if (response.code === 200) {
      orderList.value = response.data;
    }
  } catch (error) {
    console.error("获取订单数据失败:", error);
  }
};

onMounted(() => {
  fetchOrderData();
});
</script>

<style scoped>
.order-list-container {
  margin: 0 auto;
  max-width: 1360px;
  padding: 20px;
}

.el-table {
  font-size: 14px;
}

.el-carousel__item img {
  border-radius: 8px;
}
</style>
